<template>
	<view class="msg-list">
		<view class="msg-item">
			<view class="item-left">
				<text class="item-name">昵称</text>
				<input class="item-input" placeholder="请输入被评人昵称" placeholder-class="input-placeholder" type="text"
					v-model="currentInfo.nickName">
			</view>
			<view class="item-right">
				<view class="user-avatar-block" @tap="chooseAvatarImage">
					<image class="user-avatar" :key="currentInfo.avatar" :src="getImgUrl(currentInfo.avatar)"></image>
					<!-- <view class="change-btn">更换</view> -->
				</view>
			</view>
		</view>
		
		<view class="msg-item" v-if="phone">
			<view class="item-left">
				<text class="item-name">手机号码</text>
				<input class="item-input" placeholder="请输入" v-model="currentInfo.phone" placeholder-class="input-placeholder" :disabled="!!currentInfo.phone">
			</view>
		</view>

		<!-- <picker @change="genderPickerChange" :value="currentInfo.sex - 1" :range="genderArray">
			<view class="msg-item">
				<view class="item-left">
					<text class="item-name">性别</text>
					<view class="item-input" :class="{'input-placeholder': currentInfo.sex < 1 }">
						{{currentInfo.sex < 1 ? '请选择': genderArray[currentInfo.sex - 1]}}
					</view>
				</view>
				<view class="item-right">
					<image class="right-arrow-icon" src="../../static/rightTriangleArrow.png"></image>
				</view>
			</view>
		</picker> -->

	    <view class="msg-item" @tap="toSelectIdentityDesc">
			<view class="item-left">
				<text class="item-name">专业（必填）</text>
				<view class="item-input input-placeholder">{{currentInfo.identityDesc? currentInfo.identityDesc:'请选择被评人的专业'}}</view>
			</view>
			<view class="item-right">
				<image class="right-arrow-icon" src="../../static/rightTriangleArrow.png"></image>
			</view>
		</view>		
		
        <view class="msg-item">
			<view class="item-left">
				<text class="item-name">单位</text>
				<input class="item-input" placeholder="请输入" placeholder-class="input-placeholder" type="text" v-model="currentInfo.company">
			</view>
		</view>
		
		
		<!-- <view class="msg-item">
			<view class="item-left">
				<text class="item-name">职位</text>
				<input class="item-input" placeholder="如高级英语教师等,请输入" placeholder-class="input-placeholder" type="text" v-model="currentInfo.position">
			</view>
		</view> -->

		<!-- <view class="msg-item">
			<view class="item-left">
				<text class="item-name">地区</text>
				<input class="item-input" placeholder="如:北京、上海、广东广州等,请输入" placeholder-class="input-placeholder"
					type="text" v-model="currentInfo.address">
			</view>
		</view> -->
		
		<uni-data-picker :localdata="areaData" popup-title="请选择地区" @change="onSelectArea">
			<view class="msg-item">
				<view class="item-left">
					<text class="item-name">地区</text>
					<view class="item-input input-placeholder">{{currentInfo.address ? currentInfo.address :'请选择地区'}}
					</view>
				</view>
			</view>
		</uni-data-picker>

		<view class="submit-btn-wrap">
			<largeBtn @btnClk="confirm">确定</largeBtn>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	import areaData from "../../config/areaData.js"
	export default {
		data() {
			return {
				selectedGenderIndex: -1,
				genderArray: ['男', '女'],
				currentInfo: {
					nickName: "",
					phone:'',
					sex: 0,
					avatar: "",
					identityDesc: "",
					company: "",
					position: "",
					address: ""
				},
				areaData: areaData,
				phone:'',
				virtualId:''
			}
		},
		computed: {
			...mapState(['token', 'globalConfig','tempIdentityDesc']),
		},
		onShow(){
			this.currentInfo.identityDesc = this.tempIdentityDesc
		},
		onLoad(options){
			this.currentInfo.phone = options.phone || options.virtualId
			this.phone = options.phone
			this.virtualId = options.virtualId
			if(this.phone){
                // this.currentInfo.nickName = `手机用户${this.phone.slice(-4)}`
			}
			if(this.virtualId){
                // this.currentInfo.nickName = `微信用户${this.virtualId.slice(-4)}`
			}
		},
		created(){
			
		},
		methods: {
			chooseAvatarImage() {
				// uni.chooseImage({
				// 	count: 1, //默认9
				// 	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				// 	sourceType: ['album'], //从相册选择
				// 	success: (res) => {
				// 		uni.uploadFile({
				// 			url: `${this.globalConfig.origin}/api/settingservice/uploadfileavatar`, //后端用于处理图片并返回图片地址的接口
				// 			filePath: res.tempFilePaths[0],
				// 			name: 'file',
				// 			header: {
				// 				'Authorization': this.token,
				// 			},
				// 			success: res => {
				// 				const resData = JSON.parse(res.data)
				// 				this.currentInfo.avatar = resData.data + ''
				// 			},
				// 			fail: () => {}
				// 		})

				// 	}
				// });
			},
			genderPickerChange(e) {
				this.currentInfo.sex = e.target.value * 1 + 1
			},
			
			confirm(){
				if(!this.currentInfo.nickName){
					uni.showToast({
						title: '请输入被评人昵称',
						icon: 'none'
					})
					return
				}
				if(!this.currentInfo.identityDesc){
					uni.showToast({
						title: '请选择被评人专业',
						icon: 'none'
					})
					return
				}
				this.$store.commit('updateNewEvaluate', {
					toUserInfo: {
						id: '007',
						...this.currentInfo
					}
				})
				// uni.navigateBack({
				// 	delta: 3
				// })
				uni.navigateTo({
					url: `/pages/userDetail/addComment?delta=${this.virtualId?3:4}`
				})
			},
			
			toSelectIdentityDesc() {
				uni.navigateTo({
					url: '/pages/userDetail/selectPosition'
				})
			},
			
			onSelectArea(e) {
				const dataArr = e.detail.value
				const area = dataArr.reduce((pre,item)=>{
					return  pre + item.text
				},'')
				this.currentInfo.address = area
			}
		}
	}
</script>

<style>
	page {
		background-color: #F3F7FD;
	}
</style>
<style lang="less">
	.msg-list {
		padding: 30rpx 40rpx;
		padding-bottom: 140rpx;

		.msg-item {
			background: #FFFFFF;
			box-shadow: 0 4rpx 8rpx 0 rgba(218, 227, 248, 0.5);
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			margin-bottom: 40rpx;

			.item-left {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.item-name {
					font-size: 36rpx;
					font-weight: 500;
					color: #333333;
					line-height: 50rpx;
					margin-bottom: 20rpx;
				}

				.item-input {
					font-size: 32rpx;
					font-weight: 400;
					color: #666;
					line-height: 44rpx;
					width: 500rpx;
					&.long{
						width: 600rpx;
					}
				}

				.input-placeholder {
					color: #999;
				}
			}

			.item-right {
				min-height: 110rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.user-avatar-block {
					display: flex;
					flex-direction: column;
					align-items: center;

					.user-avatar {
						width: 96rpx;
						height: 96rpx;
						border-radius: 48rpx;
					}

					.change-btn {
						margin-top: 12rpx;
						background-color: #F2F6FD;
						width: 84rpx;
						height: 44rpx;
						line-height: 44rpx;
						text-align: center;
						font-size: 26rpx;
						font-weight: 400;
						color: #336DA6;
						line-height: 36rpx;
					}
				}

				.right-arrow-icon {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}

	.submit-btn-wrap {
		position: fixed;
		z-index: 1;
		left: 40rpx;
		bottom: 48rpx;
		width: 670rpx;
	}
</style>
